<template>
    <div>
        <headerSearch title="新闻列表" :searchBack="true" @done="gotobtn"></headerSearch>
         <!-- 搜索框 -->
        <rearchKey :search_intop="search_intop" :searchISshow="searchISshow" v-on:spot="spot" :clearShow="clearShow" @clearClick="clearClick" @searchCancel="searchCancel"></rearchKey>
        <div class="pagecontent main-newlist" style="background-color: #fff;padding: 0 0.2rem;">
            <!-- 新闻列表 -->
            <div class="new_info_list">
                <ul v-for="(initem, t) in infos" :key="t">
                    <li @click="newsdetailClick(initem.IDNews)" v-if="initem.count ==1" class="new_info_list_li">
                        <a href="javascript:void(0)" class="clear">
                            <div class="new_info_single_img fl">
                                <img src="../common/images/cindex_41.jpg"  v-if="initem.img == null">
                                <img :src="initem.img" alt="" v-else> 
                            </div>
                            <p class="new_info_itemTitle">{{initem.Title}}</p>
                            <p class="new_info_itemdesc clear"><span class="fl">{{initem.c_name}}</span><span class="fr">{{initem.dtCreate}}</span></p>
                        </a>
                    </li>
                    <li @click="newsdetailClick(initem.IDNews)" v-else>
                        <div class="new_info_item">
                        <p>{{initem.Title}}</p>
                        <ul class="clear">
                            <li class="fl" v-for="(info, fo) in initem.img" :key="fo">
                            <a href="javascript:void(0)">
                                <span class="new_info_img fl">
                                    <img src="../common/images/cindex_41.jpg"  v-if="info == null">
                                    <img :src="info" alt="" v-else>
                                </span>										
                            </a>
                            </li>
                        </ul>
                        <p class="new_info_desc clear"><span class="fl">{{initem.summary}}</span><span class="fr">{{initem.dtCreate}}</span></p>
                        </div> 
                    </li>
                </ul>

                <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
                    <span slot="no-more" class="contentEmpty">
                        <template v-if="infos.length">
                            (ฅ>ω<*ฅ)我们是有底线的(ฅ>ω<*ฅ)
                        </template>
                        <template v-if="!infos.length">
                        <img src="../common/images/failedLoad.png" alt="">
                        <em>暂无查询结果</em>
                        </template>
                    </span>
                    <span slot="no-results" class="contentEmpty">
                        <template v-if="infos.length">
                            (ฅ>ω<*ฅ)我们是有底线的(ฅ>ω<*ฅ)
                        </template>
                        <template v-if="!infos.length">
                            <img src="../common/images/failedLoad.png" alt="">
                            <em>暂无查询结果</em>
                        </template>
                    </span>
                    <!-- <span slot="no-results" class="contentEmpty" style="margin-top: 1.2rem;">
                        <template v-if="infos.length">
                            (ฅ>ω<*ฅ)我们是有底线的(ฅ>ω<*ฅ)
                        </template>
                        <template v-if="!infos.length">
                            <img src="../common/images/failedLoad.png" alt="">
                            <em style="margin-top: -0.6rem;">暂无查询结果</em>
                        </template>
                    </span> -->
                </infinite-loading>
            </div>
        </div>
    </div>
</template>

<script>
import headerSearch from '../public/header-search.vue';
import rearchKey from '../public/rearchKey';
import InfiniteLoading from 'vue-infinite-loading';
    export default {
        data() {
            return {
                // path:'http://fc.x.e000.com',
                infos: [],
                infolist: [],
                page:0,
                num:10,
                search_intop: '',      //遮罩层样式
                searche: '',            //输入内容
                searchISshow: false,  
                clearShow: false,     //清除内容
                // items: [],
                ptype:0,
            }
        },
        components: {
            headerSearch,
            rearchKey,
            InfiniteLoading
        },
        watch: {
            searche(value) {
                if(value != '') {
                  this.clearShow = true;
                  this.search_intop = 'background-color: transparent; z-index: 0;';
                }else {
                  this.clearShow = false;
                  this.search_intop = 'background-color: rgba(0, 0, 0, 0.5);';
                }
            }
        },
        mounted() {
          //获取所有的新闻信息
          this.getAllNewsList();
        },
        methods: {
            // 获取 监听子组件input值的动向值
            spot(data) {
                this.searche = data;
                this.ptype = 1;
                // this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset');
                this.onInfinite();
            },
            // 上拉加载
            onInfinite() {
                let that = this;
                console.log("触发")
                setTimeout(() => {       
                    const temp = []; 
                    let keyword = this.searche;
                    if(!keyword) keyword = 0;
                    //排序
                    let page = '';
                    if(that.ptype == 1){
                        this.infos = [];
                        page = 0;
                    }else{
                        if(that.page == 0){
                            page = 1;
                        }else{
                            page = that.page;
                        }
                    }
                    console.log('key',page);
                    that.$fetch(that.$path+'/index.php/getAllNewsList', {page, keyword})
                        .then((res) => {
                        console.log('新闻列表',res);
                        if(res.code == 200){
                        let array = res.data;
                        array.reverse();
                        page++;
                        that.page = page;
                        // array.forEach(element => {
                        //     temp.push(element);
                        // });
                        // that.infos = that.infos.concat(temp); 
                        // console.log('999',that.infos);  
                        // if(that.num > array.length){
                        //     this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                        //     return;
                        // }

                        if(array == '') {
                            that.infos = [];
                        }else {
                            array.forEach(element => {
                                temp.push(element);
                            });
                            that.infos = that.infos.concat(temp); 
                            console.log('999',that.infos);  
                            if(that.num > array.length){
                                that.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                                return;
                            }
                        }
                        
                        // that.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
                        that.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                        }else {
                            that.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                            return;
                        }  
                       that.ptype = 0;  
                    });  
                }, 1000);
            },
            //获取所有的新闻信息
            getAllNewsList(){
                let that = this;
                let keyword = this.searche;
                if(!keyword) keyword = 0;
                let page = that.page;
                console.log('搜索后的关键词',keyword);
                that.$fetch(that.$path+'/index.php/getAllNewsList', {page,keyword})
                    .then((res) => {
                    console.log('首页',res);
                    if(res.code == 200){
                    // that.items = res.data
                    // that.actives = res.data.a_list;
                    that.infos = res.data;
                    }   
                });
            },
            //点击新闻详情
            newsdetailClick(val) {
                this.$router.push({ path: '/newsDetail', query: {id: val}});
            },
            // 点击搜索图标出现搜索框
            gotobtn() {
                this.searchISshow = true;
            },
            // 点击取消隐藏搜索框
            searchCancel(data) {
                this.searchISshow = false;
                data = '';
                this.page = 0;
                // this.getAllNewsList();
            },
            // 清除内容
            clearClick(data) {
                // this.clearShow = false;
                data = '';
            },
        },
        computed: {
            //过滤方法
        //   infos: function() {
        //     let that = this;
        //       var _search = that.searche;
        //       console.log()
        //       if (_search) {
        //           //不区分大小写处理
        //           var reg = new RegExp(_search, 'ig')
        //           //es6 filter过滤匹配，有则返回当前，无则返回所有
        //           return that.items.filter(function(e) {
        //               //匹配所有字段
        //               return Object.keys(e).some(function(key) {
        //                   let data = e.Title + e.summary + e.dtCreate;
        //                   return data.match(reg);
        //               })
        //               //匹配某个字段
        //               //  return e.name.match(reg);
        //           })
        //       };
        //       return that.items;
        //   }
        },  
    }
</script>

<style>
@import '../common/css/index.css';

.main-newlist {
    background-color: #fff;
}
/* 新闻 */
/* 多图 */
.new_info_list {
  margin: 0 -0.2rem;
}
.new_info_list .new_info_item {
  padding: 0 0.2rem;
  border-bottom: 1px solid #d8d8d8;
}
.new_info_list .new_info_item p {
  font-size: 0.28rem;
  color: #333;
  text-align: left;
  line-height: 0.46rem;
}
.new_info_list .new_info_item .new_info_img {
  width: 2.24rem;
  height: 1.46rem;
  margin-right: 0.19rem;
  text-align: center;
  vertical-align: middle;
}
.new_info_list .new_info_item li:last-child .new_info_img {
  margin-right: 0;
}
.new_info_list .new_info_item .new_info_img img {
  width: 2.24rem;
  height: 1.46rem;
  max-width: 100%;
  max-height: 100%;
}
.new_info_list .new_info_item .new_info_desc {
  line-height: 0.36rem;
  font-size: 0.22rem;
  color: #999;
  line-height: 0.46rem;
}

/* 单个图 */
.new_info_list .new_info_list_li {
  border-bottom: 1px solid #d8d8d8;
  padding: 0.2rem;
  position: relative;
}
.new_info_list .new_info_list_li .new_info_single_img {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.2rem;
  text-align: center;
  vertical-align: middle;
}
.new_info_list .new_info_list_li .new_info_single_img img {
  width: 1.2rem;
  height: 1.2rem;
  max-width: 100%;
  max-height: 100%;
}
.new_info_list .new_info_list_li .new_info_itemTitle {
  font-size: 0.28rem;
  color: #333;
  text-align: left;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 0.36rem;
}
.new_info_list .new_info_list_li .new_info_itemdesc {
  font-size: 0.22rem;
  color: #999;
  text-align: left;
  position: absolute;
  right: 0.2rem;
  bottom: 0.2rem;
  width: 76%;
  line-height: 0.3rem;
}
/* 新闻右边详情 */
.new_info_list .new_info_list_li .new_info_itemdesc span:first-child {
    width: 2rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
}
</style>